$(function () {
  // 需求1. 用cropper插件创建剪彩区域
  let option = {
    // 纵横比(宽高比) 1/1
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
  }
  // - 调用cropper方法，创建剪裁区
  $('#image').cropper(option)

  // 需求2. 点击上传 触发input file 点击事件 选择图片，能够实现选择图片 --------------------
  $('#chooseFile').on('click', function () {
    $('#file').click()
  })

  // 需求3. input 注册 change事件 选中图片放入剪裁区域
  $('#file').on('change', function () {
      let obj = this.files[0]
    if (obj === undefined) {
        return layui.layer.msg('请选择图片')
    }
    //根据对象生成图片路径 URL内置方法
    let url = URL.createObjectURL(obj)
    //删除原来剪裁区域内容
    $('#image').cropper('destroy')
               .attr('src',url)//添加新的路径
               .cropper(option)//重新渲染剪裁区域
  })

  //需求4. 点击确定上传图片
  $('#sure').on('click', function () {
    //   把剪裁区域的图片转成 base64格式的字符串
    let dataRUL = $('#image').cropper('getCroppedCanvas', {
        width: 30, height: 30 //创建一个canvas画布
    }).toDataURL()//将canvas画布上的内容转化
    //发送axios 渲染头像
    axios({
        url:'/my/update/avatar',
        method:'post',
        data: 'avatar='+encodeURIComponent(dataRUL)
    }).then(res=>{
        //成功回调
        console.log(res);
        let {data: {status, message}} = res;
        if (status === 0) {
          layui.layer.msg(message)
        }
        layui.layer.msg('恭喜头像更换成功')
        window.parent.getUserInfo()
    })
  })
})
